<template>
  <a-card :bordered="false">


    <a-row  :gutter="24">
      <a-col :offset="1" :span="23">
        <draggable @end="end" :options="{animation: 300}" v-model="picDataSource" style="display: inline-block">
          <template v-for="(data,index) in picDataSource">
            <div style="float: left;width:150px;height:150px;margin-right: 10px;margin: 0 8px 8px 0;" :key="index">
              <div style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <a-button type="primary" size="small" preview="index" icon="delete" @click="handleDeleteImg(data)" class="float-right-top"/>

                <video v-if="data.picType === 'video'" style="width: 100%;height: 100%;" :src="data.picUrl" preview="index"/>
                <img v-else style="width: 100%;" :src="data.picUrl" preview="index">
              </div>
            </div>
          </template>

        </draggable>
      </a-col>
      <a-col :span="23" :style="{ textAlign: 'right' }">
        <a-upload
          :showUploadList="false"
          :action="uploadAction"
          :multiple="true"
          :data="{'isup':1,'dir':'goods/'+this.param.productSn+'/main/'}"
          :headers="headers"
          :beforeUpload="beforeUpload"
          @change="handleChange"
        >
          <a-button> <a-icon type="upload" /> Upload </a-button>
        </a-upload>

        <a-button @click="sureChange" style="margin-left: 18px"  type="primary">确定</a-button>
      </a-col>
    </a-row>

  </a-card>
</template>

<script>

  import {getAction} from '@/api/manage'
  import { httpAction } from '@/api/manage'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import draggable from 'vuedraggable'
  import Vue from 'vue'

  export default {
    name: "PmsProductPicsList",
    components: {
      draggable
    },
    data() {
      return {
        description: '信息',
        headers:{},
        param: {},
        picDataSource: [],
        delDateSource:[],
        url: {
          fileUpload: window._CONFIG['domianURL']+"/sys/common/ossUpload",
          list: "/pms/pmsProduct/listPmsProductPicsByMainId",
          edit: '/pms/pmsProduct/editPmsProductPics',
        }
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token};
    },
    computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      beforeUpload: function(file){
        var fileType = file.type;
        console.log("fileType",fileType);
        if(fileType.indexOf('image')<0 && fileType.indexOf('video')<0){
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      handleChange (info) {
        let newImage = {};
        if (info.file.status === 'uploading') {
          this.uploadLoading = true;
          return
        }
        if (info.file.status === 'done') {
          //this.picDataSource.push(newImage);
          let response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          //console.log(response);
          if(response.success){
            newImage.productId = this.param.mainId;
            newImage.picUrl = response.message;
            newImage.sort = 0;
            newImage.delFlag = 0;
            newImage.picType = response.result.type;
            this.picDataSource.push(newImage);
          }else{
            this.$message.warning(response.message);
          }
        }
      },
      end: function (evt) {
        console.log("拖动前的位置"+evt.oldIndex);
        console.log("拖动后的位置"+evt.newIndex);
      },
      sureChange(){
        for(var i=0;i<this.picDataSource.length;i++){
          this.picDataSource[i].sort = i;
        }
        this.handlePicList();
        //this.newDateSource = this.picDataSource;
      },
      handleDeleteImg(data){
        this.delDateSource.push(data);
        var j;
        for(var i=0;i<this.picDataSource.length;i++){
          this.picDataSource[i] === data;
          j = i;
          break;
        }
        this.picDataSource.splice(j, 1);
        //console.log(data);
        console.log("删除方法");
      },
      loadData() {
        this.picDataSource = [];
        this.delDateSource = [];
        getAction(this.url.list, {productId:this.param.mainId}).then((res) => {
          if (res.success) {
            this.picDataSource = res.result;
          } else {
            this.picDataSource = [];
          }
        })
      },
      getMain(mainId, productSn) {
        this.param.mainId = mainId;
        this.param.productSn = productSn;
        this.loadData();
      },
      handlePicList() {
        const that = this;
        that.confirmLoading = true;
        let httpurl = this.url.edit;
        let method = 'put';
        let formData = {};
        formData.picDataSource = that.picDataSource;
        formData.delDateSource = that.delDateSource;
        //时间格式化

        console.log(formData)
        httpAction(httpurl,formData,method).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.loadData();
            that.$emit('ok');
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      },
      /*handleAdd: function () {
        this.$refs.modalForm.add(this.queryParam.mainId);
        this.$refs.modalForm.title = "添加商品图片";
      },*/
    }
  }
</script>
<style scoped>
  .ant-card {
    margin-left: -30px;
    margin-right: -30px;
  }
  .float-right-top{
    position: absolute;
    top: 5px;
    right:5px;
    z-index: 1;
  }
</style>
